<template>
  <div style="background-color: white">
    <IntroPic :picture="pic" title="收 藏 夹"></IntroPic>

    <Null v-if="collectList.length === 0"></Null>

    <div
            v-else
            v-loading="loading"
            element-loading-text="数据正在加载..."
            style="margin-left: 10%;margin-right: 10%;margin-top: 30px;">
      <el-table
          ref="tableRef"
          :data="collectList"
          style="margin-left: auto;margin-right: auto;width: max-content;"
          @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="产品" width="320">
          <template #default="scope">
            <div style="height: 350px;width: 200px;margin-left: 1%;">
              <img style="width: 100%;height: 100%;object-fit:cover;margin-bottom: auto;margin-top: auto;" :src="scope.row.imageUrl">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="书名" width="350" >
          <template #default="scope">
              <a href="javascript:;" @click="gotoBookDetail(scope.row.collectId)">
                  <div style="height: 300px;display: flex;">
                      <div style="margin-left: 3%;width: 400px;height: max-content;font-size: 18px;
          margin-top: auto;margin-bottom: auto;color: #7a7777;">
                          {{ scope.row.title }}
                      </div>
                  </div>
              </a>
          </template>
        </el-table-column>
        <el-table-column label="类别" width="200" >
          <template #default="scope">
            <div style="height: 300px;display: flex;">
              <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
                {{ scope.row.type }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收藏时间" width="230" >
          <template #default="scope">
            <div style="height: 300px;display: flex;">
              <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
                {{ scope.row.createdAt }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="collectList.length !== 0" style="margin-left: 30px;margin-top: 30px">
      <el-button @click="delButton" style="height: 40px;width: 100px;margin-left: 15%" type="danger" round>
        删除
      </el-button>
    </div>

  </div>
</template>

<script setup>
import IntroPic from "../Slither/IntroPic.vue";
import {computed, ref} from "vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import BorrowCart from "../Slither/BorrowCart.vue";
import Null from "../Composite/Null.vue";
const router = useRouter();

const tableRef = ref(null)

let loading = ref(false)

let pic = ref('')
const getPic = ()=>{
  axios.get('/pic/collect').then(res => {
    //console.log(res.data.data);
    pic.value = res.data.data;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getPic();

let collectList = ref([])
const getCollectList = ()=>{
  loading.value = true
  axios.get('/collect/list').then(res => {
    //console.log(res.data.data);
    collectList.value = res.data.data;
    loading.value = false
  }).catch(error => {
    loading.value = false
    ElMessage.info("请你先登录")
    router.push("/login")
  })
}
getCollectList();
const  delButton = ()=>{
  let delList = [];
  for (let temp of tableRef.value.getSelectionRows()) {
    //console.log(temp);
    delList.push(temp.collectId);
  }
  axios.post("/collect/del", {
    delList: delList
  }).then(()=>{
    //getCartList();
    for (let temp of tableRef.value.getSelectionRows()) {
      for (let k = 0; k < collectList.value.length; k++) {
        if (collectList.value[k].collectId === temp.collectId) {
          collectList.value.splice(k, 1);
        }
      }
    }
  }).catch(error => {
    ElMessage.error(error)
  })
}

const selectionChange = (val)=>{
  //console.log(tableRef.value.getSelectionRows());
}

const gotoBookDetail = (collectId)=>{
    //console.log(collectId);
    axios.get('/collect/getBookId/'+ collectId).then(res => {
        console.log("book"+res.data.data);
        router.push({ path: '/bookDetail', query: { id:  res.data.data } })
    }).catch(error => {
        //ElMessage.info("请你先登录")
        //router.push("/login")
    })
}

</script>

<style scoped>
.el-table{
  font-size: 18px;
}
a{
    text-decoration: none; /* 去除默认的下划线 */
    color: #000;    /* 去除默认的颜色和点击后变化的颜色 */
}
</style>
